<!-- 我的纸条 -->
<template>
	<view class="box">
		<view class="tab">
			<view 
			:class="tabindex==index?'tab-view actives':'tab-view'"
			v-for="(item,index) in tablist" 
			:key="index" 
			@click="ontab(index)"
			>{{item}}</view>
		</view>
		<view class="content"> 
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
			<view class="list" v-for="(item,index) in list" :key="index" @click.stop="oninfo(item)">
				<view class="list-top">
					<text :class="item.sex==2?'woman':'man'">{{item.sex==2?'[女生盒子]':'[男生盒子]'}}</text>{{item.content}}
				</view>
				<view class="list-image">
					<image 
					v-for="(item,ink) in item.images" 
					:key="ink" 
					@click.stop="pictureView(ink,[item])" 
					mode="aspectFill"
					:src="item"></image>
				</view>
				<view class="list-code2" v-if="tabindex==1">
					她留的微信号： {{item.contact}} <view @click.stop="oncopy(item.contact)">复制</view> 
				</view>
				<view class="list-code" v-else>
					我留的微信号<text>{{item.contact}}</text>
				</view>
				<view class="list-bottom" v-if="tabindex==0">
					<text v-else style="color: #ba7e7e;" v-if="item.status==0">审核拒绝：{{item.remark}}</text>
					<view class="list-bottom-view">
						<view class="xg" v-if="item.status==0" >修改</view> 
						<view class="xh" v-if="item.status==1">审核中</view>
						<view class="xh" v-if="item.status==2" >销毁</view>
					</view>
					
				</view>
			</view>
			</dcp-scroller>
		</view>
		<u-popup v-model="show" close-icon-pos="top-left" mode="bottom" border-radius="14" :closeable="true">
				<view class="pop-view" >
					<view class="pop-title">{{data.sex==2?'放入一张女生纸条':'放入一张男生纸条'}}</view>
					<view class="pop-text" style="padding-top: 0;">
						<view class="pop-addr">
							<view @click="addrshow=true"><u-icon name="map-fill" style="margin-right: 10rpx;"></u-icon>{{selector[addrSelect]}}</view>
						</view>
						<view class="pop-textarea">
							<textarea value="" placeholder="您的交友简介 (介绍自己或对另一半的期待)..." placeholder-style="#aeaeae" v-model="data.content"/>
						</view>
						<view class="pop-img">
							<view v-for="(item,index) in data.images" :key="index" >
								<image @click="pictureView(index,data.images)" :src="item"></image>
								<text class="del" @click="ondel(index)">X</text>
							</view>
							<view>
								<image @click="myUpload" src="../../static/add.png"></image>
							</view>
						</view>
						<view class="pop-bottom">
							<view class="pop-bottom-left">我的微信号<u-icon name="arrow-right" color="#b3b3b3"></u-icon></view>
							<view class="pop-bottom-right"><input type="text" v-model="data.contact" placeholder="只有抽到你的人才能看到"></view>
						</view>
						<view class="pop-tips-text">
							纸条的生命<view>被抽一次后自动销毁<u-icon name="arrow-right" color="#acacac" size="28"></u-icon></view>
						</view>
					</view>
					<view class="pop-btn" >
						确认修改
					</view>
				</view>
			</u-popup>
			<u-picker @confirm="onconfirm" mode="selector" v-model="addrshow"  :default-selector="[addrSelect]" :range="selector"></u-picker>
			<backpage v-if="list.length==0" title="您暂无纸条哦!" image="../../static/love.png"></backpage>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:['我放入的纸条','我抽到的纸条'],
				tabindex:0,
				list:[
					{
						sex:2,
						content:'盒子呀盒子',
						images:['../../static/tupian.png','../../static/tupian.png','../../static/tupian.png'],
						contact:'123456789',
						status:0,
						remark:'拒绝原因'
					},
					{
						sex:2,
						content:'盒子呀盒子',
						images:['../../static/tupian.png','../../static/tupian.png','../../static/tupian.png'],
						contact:'123456789',
						status:1,
						remark:''
					},
					{
						sex:2,
						content:'盒子呀盒子',
						images:['../../static/tupian.png','../../static/tupian.png','../../static/tupian.png'],
						contact:'123456789',
						status:2,
						remark:''
					}
				],
				show:false,
				data:{
					images:[],
					sex:2,
					contact:'',
					content:''
				},
				selector: ['全国', '北京市', '天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省','江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省','贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区','台湾省','香港特别行政区','澳门特别行政区'],
				addrSelect:0,
				addrshow:false,
				isLoading: false,
			};
		},
		watch: {
				
		},
		methods:{
			// 下拉刷新
			 refresh() {
				 this.isLoading = true;
				 let that = this
				 setInterval(function(){
					 that.isLoading = false;
				 },500)
			 }, 
			onedit(item){
				this.show = true,
				this.data = item
				this.addrSelect = this.selector.indexOf(item.area)
			},
			onconfirm(e){
				console.log(e)
				this.addrSelect = e[0]
			},
			oninfo(data){
				if(this.tabindex==0){
					return
				}
				uni.navigateTo({
				    url: '../../pages/info/info?data='+JSON.stringify(data)+'&state=0'
				});
			},
			ondel(index){
				this.data.images.splice(index, 1)
			}, 
			// 预览图片
			pictureView(index,imags){
				console.log(imags)
				let imgs = imags.map( item =>{
				//只返回图片路径
					return item
				})
				// console.log(imgs);
				//调用预览图片的方法
				uni.previewImage({
					urls:imgs,
					current:index
				})
			},
			//上传返回图片
			myUpload(index) {
				uni.showLoading();
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0],'-----47----')
						uni.uploadFile({
							url: '',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'key':this.getFileName(tempFilePaths[0]),
								'token': ress.data.data.upload_token
							},
							success: (res) => {
								setTimeout(function () {
									uni.hideLoading();
								}, 200);
								
							},
							fail: (res) => {
								setTimeout(function () {
									uni.hideLoading();
								}, 200);
							}
						});
					}
				});
			},
			ontab(index){
				this.tabindex = index
			},
			oncopy(data){
				uni.setClipboardData({
				    data: data,
				    success: function () {
				        console.log('success');
						  uni.showToast({
						  	title: '文字已复制',
						  	icon: 'success',
						  	duration: 2000
						  })
				    },
					fail: (err) => {
						console.log(err)
					}
				});
			},
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		//监听页面刷到底
		onReachBottom() {
			// 触底
		},
	}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="less">
.box{
	padding: 0 20rpx;
	padding-bottom: 50rpx;
	box-sizing: border-box;
}
.tab{
	width: 100%;
	height: 93rpx;
	border: 2rpx solid #000;
	border-radius: 20rpx;
	padding: 4rpx;
	box-sizing: border-box;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	margin-top: 35rpx;
}
.tab-view{
		width: 320rpx;
		height: 100%;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;
	}
.actives{
	color: #fff;
	background: #000000;
}
.list{
	width: 100%;
	background-color: #fff;
	border-radius: 20rpx;
	margin-top: 24rpx;
	padding: 30rpx 0 30rpx 30rpx;
	box-sizing: border-box;
}
.list-top{
	width: 100%;
	line-height: 42rpx;
	font-size: 27rpx;
}
.woman{
	color: #dd53a8;
}
.man{
	color: #6881d3;
}
.list-image{
	width: 100%;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	margin-top: 19rpx;
	image{
		width: 162rpx;
		height: 162rpx;
	}
}
.list-image:after {
	content: "";
	width: 162rpx;
}
.list-code{
	width: 100%;
	height: 30rpx;
	font-size: 29rpx;
	margin-top: 24rpx;
	padding-bottom: 38rpx;
	border-bottom: 1rpx solid #e1e1e1;
	line-height: 30rpx;
	text{
		margin-left: 10rpx;
	}
}
.list-code2{
	width: 100%;
	height: 90rpx;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	font-size: 27rpx;
	font-weight: 500;
	line-height: 60rpx;
	margin-top: 30rpx;
	padding-top: 29rpx;
	border-top: 1rpx solid #e3e3e3;
	padding-right: 30rpx;
	box-sizing: border-box;
	view{
		width: 90rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		color: #fff;
		font-size: 23rpx;
		background-color: #000000;
	}
}
.list-bottom{
	width: 100%;
	height: 59rpx;
	line-height: 59rpx;
	padding-right: 30rpx;
	box-sizing: border-box;
	color: #989898;
	font-size: 24rpx;
	display: flex;
	flex-flow:row wrap;
	justify-content: space-between;
	margin-top: 31rpx;
	text{
		width: 60%;
		display: inline-block;
		 overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
}
.list-bottom-view{
	display: flex;
	align-items: center;
	margin-left: auto;
	view{
		width: 88rpx;
		line-height: 59rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		color: #fff;
		border-radius: 30rpx;
		margin-left: 20rpx;
	}
	.xh{
		background: #fa6163;
	}
	.xg{
		background: #000;
	}
}
.pop-view{
		width: 100%;
		padding: 47rpx 49rpx 66rpx 49rpx;
		box-sizing: border-box;
	}
	.pop-title{
		width: 100%;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		font-weight: bold;
	}
	.pop-text{
		width: 100%;
		// height: 440rpx;
		border: 4rpx solid #000000;
		border-radius: 16rpx;
		margin-top: 55rpx;
		padding: 24rpx 19rpx 0 19rpx;
		box-sizing: border-box;
		.pop-textarea{
			width: 100%;
			height: 168rpx;
			textarea{
				width: 100%;
				height: 168rpx;
				font-size: 28rpx;
			}
		}
		
	}
	.pop-img{
		width: 100%;
		display: flex;
		flex-flow:row wrap;
		justify-content: space-between;
		border-bottom: 1rpx solid #e7e7e7;
		view{
			width: 120rpx;
			height: 120rpx;
			position: relative;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 5rpx;
				margin-bottom: 13rpx;
			}
		}
	}
	.pop-img:after {
		content: "";
		width: 120rpx;
	}
	.pop-addr{
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e7e7e7;
		margin-bottom: 24rpx;
		view{
			padding: 0 15rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 23rpx;
			color: #fff;
			background-color: #000;
			border-radius: 10rpx;
		}
	}
	.pop-tips-text{
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #e7e7e7;
		view{
			height: 100%;
			margin-left: auto;
			
		}
	}
	.del{
		position: absolute;
		top: 0;
		right: 0;
		font-size: 25rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		width: 35rpx;
		background: rgba(0,0,0,0.5);
		border-radius: 5rpx;
		color: #fff;
		padding: 5rpx;
		}
	.pop-bottom{
		width: 100%;
		display: flex;
		flex-flow:row wrap;
		justify-content: space-between;
	}
	.pop-bottom-left{
		width: 210rpx;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 28rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		border-right: 1rpx solid #e7e7e7;
	}
	.pop-bottom-right{
		width: 398rpx;
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #aaaaaa;
		input{
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			padding-left: 20rpx;
			box-sizing:border-box;
		}
	}
	.pop-tips{
		width: 100%;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin: 35rpx 0 32rpx 0;
	}
	.pop-btn{
		width: 100%;
		height: 99rpx;
		border-radius: 24rpx;
		background: #000000;
		line-height: 99rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
</style>
